
import styled from 'styled-components';
import { CSSProperties, useEffect, useState } from 'react';
import { Button, Select } from 'antd';
import {
    FooterToolbar,
    PageContainer,
    ProForm,
    ProFormDateRangePicker,
    ProFormDigit,
    ProFormRadio,
    ProFormItem,
    ProFormSelect,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProLayout,
} from '@ant-design/pro-components';

import { Application, ApplicationCategory, appstoreCategoriesList2value, appstoreCategoriesValue2list, appstoreSaveApplication, qiniuGetUploadToken } from '../../../services';
import { QiniuFileUpload } from '../../../components';
import { getNowFormatDate, uuid } from '../../../utils';
import { ProFormCategoriesSelect } from './categories-proform-select';

export interface MyApplicationEditorProps {
    style?: CSSProperties;
    categories: Array<ApplicationCategory>;
    item: Application;
    onFinish: () => Promise<void> | void;
}

export const MyApplicationEditor: React.FC<MyApplicationEditorProps> = (props) => {

    const [icon, setIcon] = useState<Array<string>>([]);

    const [images, setImages] = useState<Array<string>>([]);

    useEffect(() => {

    }, [props.item]);

    return (
        <Container style={props.style}>
            <ProForm<Application>
                request={async () => {
                    if (!props.item) return {};
                    if (props.item.icon && props.item.icon.length > 0) {
                        setIcon([props.item.icon]);
                    }
                    if (props.item.images && props.item.images.length > 0) {
                        setImages(props.item.images);
                    }
                    props.item.categories = appstoreCategoriesValue2list(props.item.categories as number);
                    return props.item;
                }}
                onFinish={async (values: any) => {
                    //TODO 校验
                    console.log(values);
                    let application = {
                        ...props.item,
                        categories: appstoreCategoriesList2value(values.categories),
                        name: values.name,
                        description: values.description,
                    };
                    if (icon && icon.length > 0) {
                        application.icon = icon[0];
                    }
                    if (images && images.length > 0) {
                        application.images = images;
                    }
                    console.log(application);
                    //
                    let res = await appstoreSaveApplication(application);

                    props.onFinish && await props.onFinish();
                }}
                submitter={false}
            >
                <ProForm.Group>
                    <ProFormText width="sm" fieldProps={{}}
                        tooltip="应用显示的名称"
                        rules={[{ required: true }]} name="name" label="名称" />

                    <ProFormSelect
                        rules={[{ required: true }]}
                        options={props.categories ? props.categories.map((item, index) => {
                            return {
                                value: item.code + '',
                                label: item.name,
                            }
                        }) : []}
                        fieldProps={{ mode: "multiple", maxCount: 3 }}
                        width="sm"
                        name="categories"
                        tooltip="应用的相关分类，用于应用商店筛选"
                        label="分类"
                    />
                </ProForm.Group>

                <ProFormTextArea
                    rules={[{ required: true }]} width="xl" fieldProps={{ rows: 4 }} label="描述" name="description" />

                <ProFormItem
                    extra="只能上传jpg/png文件,且不大于1MB"
                    label="图标"
                    name="icon">
                    <QiniuFileUpload
                        title={'上传图标'}
                        listType={'picture-card'}
                        accept={"image/png, image/jpeg"}
                        max={1}
                        values={icon}
                        isPicture={true}
                        filePath={`g01/applications/images/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            setIcon(files);
                        }}></QiniuFileUpload>
                </ProFormItem>

                <ProFormItem
                    extra="只能上传jpg/png文件,且不大于1MB"
                    label="应用效果图片"
                    name="images">
                    <QiniuFileUpload
                        title={'上传效果图片'}
                        listType={'picture-card'}
                        accept={"image/png, image/jpeg"}
                        max={3}
                        values={images}
                        isPicture={true}
                        filePath={`g01/applications/images/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            setImages(files);
                        }}></QiniuFileUpload>
                </ProFormItem>
                <ProFormItem>
                    <Button type="primary" htmlType="submit">
                        保存
                    </Button>
                </ProFormItem>
            </ProForm>
        </Container>
    );
}

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
`;
